import React, { useState, useEffect, useCallback, useRef } from 'react'
import { Route, useHistory } from 'react-router-dom'

import DefStyle from './css/index.module.css'
import Axios from 'axios'
// import OldKeyWord from './css/oldKeyWord.module.css'
import NewKeyWord from './css/newKeyWord.module.css'
import Star from '../../img/star.png'
function Index() {
    const ref: any = useRef(window)
    let history = useHistory();
    const [data, setData] = useState([])
    const [type1, setType1] = useState('苏州')
    useEffect(() => {
        let url: string = `/get_house?type=${type1}`
        fetch(url)
            .then(response => response.json())
            .then(data => {
                setData(data.res)
            })
    }, [])
    let fun = useCallback(
        (e: any,) => {
            e.stopPropagation()

            ref.current.location.href = `http://localhost:3000/detail?detailid=${e.currentTarget.dataset.id}`
            // history.push({ pathname: `/detail?detailid=${e.currentTarget.dataset.id}`, state: {} });
        },
        [],
    )

    let xuanran = < div className={DefStyle.contentGoodsBox} >{
        data.map((item, index) => {
            return (
                < div className={DefStyle.goods_1} onClick={fun} data-id={index + 1}>
                    <img className={DefStyle.titleImg} src={item.img} alt="" />
                    <span className={DefStyle.titleName}>{item.name}</span>
                    <div className={DefStyle.detailIfo}>{item.detail}</div>
                    <div className={DefStyle.priceBox}>
                        <span className={DefStyle.newPrice}>￥{item.price}</span>
                        <span className={DefStyle.oldPrice}>￥{item.price}</span>/晚
                    </div>
                    {item.like ? (<div className={DefStyle.likeBox}>
                        <div className={DefStyle.starImg} ></div>
                        <span> {item.like}</span>
                    </div>) : ""}
                </div >
            )
        })}
    </div >

    return (
        <div>
            <div className={DefStyle.PreferentialListings}>
                <div className={DefStyle.preferentialListings_title}>
                    特惠房源
                </div>
                <span className={DefStyle.title_detail}>品质房源，低至5折</span>
            </div>
            {/* 关键字查询 */}
            <div className={DefStyle.KeywordSearch}>
                {/* <div className={DefStyle.keyWord_li, DefStyle.oldkeyWord_li} > 苏州</div> */}
                <div className={DefStyle.keyWord_li} > 苏州</div>
                <div className={DefStyle.keyWord_li}>上海</div>
                <div className={DefStyle.keyWord_li}>杭州</div>
                <div className={DefStyle.keyWord_li}>南京</div>
                < div className={DefStyle.keyWord_li}>广州</div>
                <div className={DefStyle.keyWord_li}>成都</div>
                <div className={DefStyle.keyWord_li}>长沙</div>
                <div className={DefStyle.keyWord_li}>丽江</div>
            </div>
            {/*商品的展示区域 */}
            {xuanran}
            <div className={DefStyle.lookMore}>
                查看更多重庆房源
                <span className='iconfont icon-jiantou_liebiaoxiangyou'></span>
            </div>
        </div >
    )
}
export default Index;
